<template>
   <div ref="historicalPerformance" class="historicalPerformance">

   </div>
</template>
<script>

import { getPerformanceHistory } from '@/api/analysis.js';
export const labelNameMap = {
   assembly: 'DanTai',
   metricNameOne: 'HSI',
   metricNameTwo: '沪深300',
   metricNameThree: 'MSIC中国'
}
export const labels = ['assembly', 'metricNameOne', 'metricNameTwo', 'metricNameThree']
export default {
   name: '',
   components: {

   },
   data() {
      return {
         dataMap: {},
         uniqueLabels: labels,
         echartData: [],
         labelNameMap,
      }
   },
   mounted() {
      const companyId = this.$route.query.companyId;
      const fundId = this.$route.query.id
      getPerformanceHistory({
         companyId,
         fundId,
      }).then(res => {
         this.data = res.data;
         this.data.forEach(value => {
            const date = new Date(value.timeValue).toISOString().substr(0, 10);
            this.dataMap[date] = {
               ...value,
               assembly: ((value.assembly || 0) * 100).toFixed(2),
               metricNameOne: ((value.metricNameOne || 0) * 100).toFixed(2),
               metricNameTwo: ((value.metricNameTwo || 0) * 100).toFixed(2),
               metricNameThree: ((value.metricNameThree || 0) * 100).toFixed(2),
            };
         });
         this.render()
      })
   },
   methods: {
      render() {
         let chartInstance = this.$echarts.init(this.$refs.historicalPerformance);
         const xKeys = Object.keys(this.dataMap).sort()
         xKeys.forEach(key => {
            this.uniqueLabels.forEach((label, index) => {
               const targetValue = this.dataMap[key];
               if (targetValue) {
                  if (!this.echartData[index]) {
                     console.log('this.labelNameMap[label]', this.labelNameMap[label])
                     this.echartData[index] = {
                        name: this.labelNameMap[label],
                        data: [targetValue[label]],
                        type: 'line',
                        stack: 'Total',
                     };
                  } else {
                     this.echartData[index].data.push(targetValue[label])
                  }
               }
            })
         })

         const legend = this.uniqueLabels.map(val => this.labelNameMap[val])


         let option = {
            tooltip: {
               trigger: 'axis'
            },
            legend: {
               data: legend
            },
            grid: {
               left: '3%',
               right: '4%',
               bottom: '3%',
               containLabel: true
            },
            toolbox: {
               feature: {
                  saveAsImage: {}
               }
            },
            xAxis: {
               type: 'category',
               boundaryGap: false,
               data: xKeys,
            },
            yAxis: {
               type: 'value'
            },
            series: this.echartData

         };
         chartInstance.setOption(option);
      }
   }
};
</script>
<style lang='' scoped>
.historicalPerformance{
   width: 100%;
   height: 400px;
}
</style>